<template lang="pug">
    div
        //-h1(style="text-align:center;") 公司地址信息
        //-br
        Table(border :columns="columns" :data="data")
        br
        hr
        br
        Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" :label-position="left")
            FormItem
                Button(type="primary" style="margin-left:10px" @click="handleSubmit('formValidate')") 增加
            FormItem(label="site" prop="site")
                Input(v-model="formValidate.site" placeholder="请输入site" style="width:300px")
            FormItem(label="地址" prop="address")
                Input(v-model="formValidate.address" placeholder="请输入地址" style="width:300px")
            FormItem(label="电话" prop="phone")
                Input(v-model="formValidate.phone" placeholder="请输入电话" style="width:300px")
            FormItem(label="地图链接" prop="link")
                Input(v-model="formValidate.link" placeholder="请输入地图链接" style="width:300px")
            FormItem(label="头像" prop="img")
                Upload(action="/api/imgUpload" :on-success="handleSuccess" :show-upload-list="false" :format="['jpg','jpeg','png']")
                    template(v-if="formValidate.img != ''")
                        img(type="ghost"  :src="'/public/img/' + formValidate.img" style="width:100px;height:100px;")
                    template(v-else)
                        Button(type="ghost" icon="ios-cloud-upload-outline") Upload Image
</template>
<script>
export default {
    data() {
        return {
            formValidate: {
                site: "",
                img: "",
                address: "",
                phone: ""
            },
            data: [],
            columns: [
                {
                    title: "编号",
                    key: "id"
                },
                {
                    title: "图片",
                    key: "img",
                    render: (h, params) => {
                        return h("img", {
                            attrs: {
                                width: 80,
                                height: 80,
                                src: "/public/img/" + params.row.img,
                                style: "margin:5px"
                            }
                        });
                    }
                },
                {
                    title: "site",
                    key: "site"
                },
                {
                    title: "地址",
                    key: "address"
                },
                {
                    title: "电话",
                    key: "phone"
                },
                {
                    title: "地图链接",
                    key: "link"
                },
                {
                    title: "操作",
                    key: "action",
                    width: 150,
                    align: "center",
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "error",
                                        size: "small"
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params);
                                        }
                                    }
                                },
                                "Delete"
                            )
                        ]);
                    }
                }
            ]
        };
    },
    async mounted() {
        var res = (await this.axios.get("/api/contactUs")).data.message.data;
        this.data = res;
    },
    methods: {
        async handleSubmit(name) {
            var res = (await this.axios.post("/api/contactUs", {
                data: this.formValidate
            })).data;
            if (res.status) {
                var id = res.message.data.insert_id;
                this.formValidate.id = id;
                this.$Message.success("Success!");
                this.data.push(this.formValidate);
            } else {
                this.$Message.error("Fail!");
            }
        },
        handleSuccess(res) {
            this.formValidate.img = res.message.data.filename;
        },
        async remove(params) {
            this.$Modal.confirm({
                title: "确认删除",
                content: "<p>确认删除吗？</p>",
                onOk: async () => {
                    var id = this.data[params.index].id;
                    await this.axios.delete("/api/contactUs/" + id);
                    var res = (await this.axios.get("/api/contactUs")).data
                        .message.data;
                    this.data = res;
                    this.$Message.info("Clicked ok");
                },
                onCancel: () => {
                    this.$Message.info("Clicked cancel");
                }
            });
        }
    }
};
</script>

